import React from 'react';
import { Icon } from 'antd';

class NameTips extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showMoreText: false,
    };
  }

  render() {
    const { showMoreText } = this.state;
    return (
      <div style={{...styles.NameTips, justifyContent: 'flex-end'}}>
        <div style={{width: '474px'}}>
          <div style={{...styles.flexRow, flex: 1, justifyContent: 'flex-end'}} onClick={() => this.setState({ showMoreText: !showMoreText })}>
            <div style={{ ...styles.tipsText, cursor: 'pointer' }}>
              命名提示： 1、 证据无原件的，请务必在文件名上注明“无原件”，避免误判案件
            </div>
            <Icon type={showMoreText ? 'caret-up' : 'caret-down'} style={{...styles.tipsText}} />
          </div>
          {!!showMoreText && (
            <div style={{ marginLeft: '78px' }}>
              <div>2、 证据命名：</div>
              <div style={{paddingLeft: '23px'}}>
                <span style={styles.textDecoration}>文件落款日期-文件名-有谁签字-有谁盖章-第几页</span>
              </div>
              <div style={{paddingLeft: '23px'}}>
                <span style={styles.textDecoration}>无原件-文件落款日期-文件名-有谁签字-有谁盖章-第几页</span>
              </div>
              <div>3、 律师团队起草的文书、需要委托人签署的文书命名：</div>
              <div style={{paddingLeft: '23px'}}>
                <span style={styles.textDecoration}>文件名-要几份-要谁签字-要谁盖章-第几稿</span>
              </div>
              <div>4、 司法文书命名：</div>
              <div style={{paddingLeft: '23px'}}>
                <span style={styles.textDecoration}>文件签收日期-文件名-备注（比如，上诉期、异议期、管辖权、保全、撤诉等）</span>
                &nbsp;
              </div>
              <div>5、 案例命名：</div>
              <div style={{paddingLeft: '23px'}}>
                <span style={styles.textDecoration}>案号-支持我方/不支持我方-作出法院</span>
              </div>
              <div>6、 法律法规命名：</div>
              <div style={{paddingLeft: '23px'}}>
                <span style={styles.textDecoration}>实施日期-法规名-有效/失效</span>
              </div>
              <div>7、 文件有多页的，请先合成一份pdf或word，再上传。</div>
            </div>
          )}
        </div>
      </div>
    );
  }
}
const styles = {
  flexRow: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
  },
  NameTips: {
    flex: 1,
    display: 'flex',
    flexDirection: 'row',
  },
  tipsText: {
    color: '#ff7875',
    marginLeft: '10px',
    paddingRight: 0,
    marginTop: '20px',
    marginBottom: '5px',
  },
  textDecoration: {
    textDecoration: 'underline',
  },
};

export default NameTips;
